<template>
	<scroll-view scroll-x="true" class="tabs">
		<view :class="`tab ${current ==index ? 'current' :''}`" v-for="(item,index) in tabList" :key="item.id"
			@click="changeTab(item)">{{item.name}}</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			value: {
				type: Number,
				default: 0
			},
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		computed: {
			tabList() {
				return this.list.map(v => {
					return {
						id: v.series_id,
						name: this.handleLang(v.series_name),
						is_def: v.is_def
					}
				})
			},
			current() {
				console.log(this.value);
				return this.tabList.findIndex(v => v.id === this.value)
			},
		},
		watch: {
			list: {
				deep: true,
				immediate: true,
				handler(v) {
					let hasDef = this.tabList.find(v => v.is_def)
					if (hasDef) {
						this.changeTab(hasDef)
					}
				}
			}
		},
		methods: {
			changeTab({
				id
			}) {
				this.$emit('change', id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		white-space: nowrap;
		background: #1D1D1D;

		.tab {
			display: inline-block;
			height: 64rpx;
			color: #EFF9FF;
			font-size: 28rpx;
			padding: 8rpx 40rpx;
			text-align: center;
			box-sizing: border-box;
			line-height: 48rpx;
		}

		.current {
			background: #1D1D1D;
			font-weight: 500;
			color: #EFF9FF;

			&::after {
				display: block;
				content: '';
				width: 40rpx;
				height: 6rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				background: #EFF9FF;
				margin: 0 auto;
			}
		}
	}
</style>